<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core">
    <style>
        .ui-menubutton button{
            width: 25px;
            height: 18px !important;
        }
    </style>

    <p:panel header="ESTADOS" style="border: none">
        <div align="center">
            <p> <h:outputText value="REGISTRO DE ESTADO" style="color: #069; font-weight: bold; font-size: 15px" /></p>
            <h:form id="RegisterState" style="font-weight: bold">
                <h:panelGrid columns="2">
                    <h:outputText value="Nombre : "/>
                    <p:inputText value="#{stateBean.state.name}" size="40" required="true" label="Nombre"/>

                    <h:outputText value="Nombre Entidad : "/>
                    <p:selectOneMenu value="#{stateBean.state.nameEntity}">
                        <f:selectItem itemLabel="Selecione un Valor" value="#{null}"/>
                        <f:selectItems value="#{stateBean.nameEntitys}" var="entity"
                                       itemLabel="#{entity}" itemValue="#{entity}" />
                    </p:selectOneMenu>

                    <h:outputText value="Detalle :"/>
                    <p:inputTextarea value="#{stateBean.state.detail}" style="width: 97%" 
                                     required="true" label="Funcion" autoResize="false"/>
                </h:panelGrid>
                <br/>
                <p:commandButton value="Guardar" action="#{stateBean.saveState}" 
                                 icon="ui-icon-disk" update="RegisterState,:formListState:dataTable" />

            </h:form>
        </div>

        <br/>
        <div align="center">
            <p><h:outputText value="LISTA DE ESTADOS" style="color: #069; font-weight: bold; font-size: 15px"/></p>
            <h:form id="formListState" >
                <p:dataTable id="dataTable" var="state" filteredValue="#{stateBean.listStateFilter}"
                             value="#{stateBean.listState}" widgetVar="stateTable"
                             paginator="true" rows="10" style="border-radius: 0px;">  

                    <p:column style="width: 3%">  
                        <p:menuButton id="button" style="width: 30px; height: 30px" value=" ">
                            <p:menuitem value="Editar" icon="ui-icon-pencil" update=":RegisterState">
                                <f:setPropertyActionListener value="#{state}" target="#{stateBean.state}"/>
                            </p:menuitem>
                        </p:menuButton> 
                    </p:column>  

                    <p:column footerText="Nombre" sortBy="#{state.name}"
                              style="width: 10%">  
                        <h:outputText value="#{state.name}" title="#{state.name}"/>  
                    </p:column>

                    <p:column footerText="Entidad" filterBy="nameEntity"
                              filterOptions="#{stateBean.nameEntitysFilter}"  
                              filterMatchMode="exact" style="width: 17%">  
                        <h:outputText value="#{state.nameEntity}" />  
                    </p:column>

                    <p:column footerText="Detalle" styleClass="wrap" style="width: 70%;">  
                        <h:outputText value="#{state.detail}" />   
                    </p:column>

                </p:dataTable>  
            </h:form>
        </div>

    </p:panel>
</ui:composition>
